<template>
  <div>
      <label for="" :class="{changeAnimate:isChangeAnimate,resetAnimate:!isChangeAnimate}">{{info.label}}</label>
      <input :type="info.type ? info.type : 'text'" @focus="isChangeAnimate = true" @blur="resetStyle" v-model="info.val">
      <i @click="toogle(info.toogle)">{{info.right}}</i>
  </div>
</template>

<script>
export default {
    data() {
        return {
            isChangeAnimate:this.info.val == '' ? false : true,
        }
    },
    props:{
        info:{
            type:Object
        }
    },
    methods: {
        resetStyle(){
            if(this.info.val != ""){
                return
            }
            this.isChangeAnimate = false
        },
        // 触发钩子函数
        toogle(fun){
            if (fun !== undefined) {
                fun();
            }
        }
    },
}

</script>
<style lang="scss" scoped>
    div{
        height: 70px;
        width: 100%;
        position: relative;
        label{
            position: absolute;
            bottom: 10px;
            font-size: 16px;
        }
        input{
            width: 100%;
            height: 40px;
            border: none;
            border-bottom: 1px solid #888;
            background: transparent;
            position: absolute;
            bottom: 0px;
            &:hover{
                outline: none;
                border-bottom: 2px solid $starbucks-color;
                transition: .5s;
            }
        }
        i{
            position: absolute;
            top: 2.5rem;
            right:0px;
            color: $starbucks-color;
        }
    }
    .changeAnimate{
        bottom: 40px;
        font-size: 12px;
        transition: .5s;
    }
    .resetAnimate{
        bottom: 10px;
        font-size: 16px;
        transition: .5s;
    }
</style>